<script setup lang="ts">
import homeFooterCom from '../../components/homeFooterCom.vue'
import { onMounted, ref } from 'vue';
import type { Ref } from 'vue';
const searchtext = ref('')
const hotCategoryList: any = ref([])
const hotsearchList: any = ref([])
import { gethotCategoryList } from '../../api/user'
import {gethotsearchList} from '../../api/search'
onMounted(() => {

    gethotCategoryList({}).then(res => {
        console.log(222, res.data.hotCategoryList);
        hotCategoryList.value = res.data.hotCategoryList
    })
    gethotsearchList({}).then(res => {
        console.log(24, res.data.hotsearchList);
        hotsearchList.value = res.data.hotsearchList
    })

})

</script>
<template>
    <div class="center">
        <!-- 关键字搜索 -->
        <section>
            <van-field v-model="searchtext" placeholder="请输入关键字搜索" style="background-color: #f7f7f7;width: 80vw;" />
            <div class='search' @click="$router.push('/search')">
                <img src="../../assets/home/搜索.png" alt="">
            </div>
        </section>
        <!-- 热门搜索 -->
        <van-cell title="热门搜索" />
        <div class="hot_search">
            <div v-for="item in hotsearchList" :key="item" style="width: 80px;font-size: 14px;height: 30px;;background-color: #f7f7f7;margin-bottom: 10px;text-align: center;">
                {{ item.search }}
            </div>
        </div>
     
        <!-- 分类 -->
        <van-cell title="分类" @click="$router.push('/home/courseListView')" />
        <div class="hot_category">
            <div v-for="value in hotCategoryList" :key="value" class="hot_category">
                <img :src="value.categoryImg" alt="">
                <span>{{ value.categoryTitle }}</span>
            </div>
        </div>
        <div class="hot_category">
            <div v-for="value in hotCategoryList" :key="value" class="hot_category">
                <img :src="value.categoryImg" alt="">
                <span>{{ value.categoryTitle }}</span>
            </div>
        </div>
        <!-- footer -->
        <homeFooterCom></homeFooterCom>
    </div>
</template>
<style lang="scss" scoped>


.center {
    padding: 5vw;
    box-sizing: border-box;
}

section {
    display: flex;

    margin-bottom: 6vw
}

.search {
    background-color: #f7f7f7;
    width: 10vw;
    display: flex;
    justify-content: center;
    align-items: center;

    img {
        background-size: cover;
        width: 0.2rem;
        border: none;
    }
}
.hot_search{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}
.hot_category {
    width: 100%;
    height: 126px;
    display: flex;
    flex-direction: row;
    position: relative;
    box-sizing: border-box;
    justify-content: space-between;

    img {
        display: flex;
        flex-direction: column;
        width: 92%;
        height: 114px;
        position: relative;
    }

    span {
        position: absolute;
        bottom: 14px;
        left: 30%;
        z-index: 99;
        color: #fff;
        font-weight: bold;
    }

}
</style>